2秒おきにホームページタイトルを変更する
今回は、webブラウザのタイトルバー表示される文字を一定の間隔で変更する方法を紹介します。ブラウザ下部にあるステータスバーに文字を表示しているサイトは多くありますが、ホームページタイトルを変更しているサイトは少ないはず。ちょっと変わったテクニックとして覚えておいても損はないと思いますよ!
サンプルページ

→ onLoadイベントでJavaScript関数を呼び出す
 
ホームページタイトルとは、Webブラウザのタイトルバーに表示されている文字のことであり、HTMLではTITLEタグで指定する文字となります。今回は、この文字を2秒おきに変更していくホームページを作成します。
まずは、ホームページが表示されると同時にJavaScript関数「titlechange()」が呼び出され るように、BODYイベントにonLoadイベントを追加します。
<BODY onLoad="titlechange()">
 


→ ホームページタイトルに表示する文字を配列で指定する
 
続いて、JavaScriptを記述します。ホームページタイトルに表示する文字は、配列で指定します。今回は「title」という名前の配列を作成し、以下のような3つの文字を配列に指定しました。
なお、変数「i」は関数「titlechange()」で使用する変数となります。この初期値には「0」を指定してください。
<SCRIPT language="JavaScript">
<!--
title=new Array(3);
title[0]='魅せるホームページ作成講座';
title[1]='ホームページへようこそ';
title[2]='ホームページ作成に役立つテクニックを紹介中!!';
i=0;
// -->
</SCRIPT>
 


→ タイトルを変更するJavaScript関数を自作する
 
最後に、タイトルを変更するJavaScript関数「titlechange()」を作成します。ホームページタイトルは「document.title」で指定できるので、この値に配列「title」を指定します。また、添字「i」を1増加し、次の文字を表示する準備をしておきます。今回の例では、表示する文字が3種類あるため、if文を利用し「i」が0〜2の範囲で変化するようにしておきます。
あとは、setTimeout()で定期的に関数「titlechange()」を呼び出すだけ。2秒おきに関数を「titlechange()」を呼び出すには、2つ目の引数に「2000」(2000ミリ秒)を指定します。
<SCRIPT language="JavaScript">
<!--
title=new Array(3);
title[0]='魅せるホームページ作成講座';
title[1]='ホームページへようこそ';
title[2]='ホームページ作成に役立つテクニックを紹介中!!';
i=0;
function titlechange(){
document.title=title[i];
i++;
if (i==3){i=0}
setTimeout("titlechange()",2000);
}
// -->
</SCRIPT>
サンプルページ


e[NECir Yahoo yV LINEf[^[z500~`I
z[y[W NWbgJ[h COiq@COsI COze